<template>
  <div class="singerdetail_container">
    <div class="listinfo">
      <div class="singer_img">
        <img :src="singerdetail.cover" alt="" />
      </div>
      <div class="singer_content">
        <div class="singername">{{ singerdetail.name }}</div>
        <div class="singer_button">
          <div class="buttonItem"><i class="iconfont icon-aixin"></i>收藏</div>
          <div class="buttonItem">
            <i class="iconfont icon-lianjie"></i>链接
          </div>
        </div>
        <div class="tag">
          <div class="tagItem">单曲数：{{ singerdetail.musicSize }}</div>
          <div class="tagItem">专辑数：{{ singerdetail.albumSize }}</div>
          <div class="tagItem">MV数：{{ singerdetail.mvSize }}</div>
        </div>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="singerList">
      <el-tabs v-model="activeName">
        <el-tab-pane label="专辑" name="first">
          <div class="topSongs">
            <list-table
              :officialListDetailItem="singerTopSongs"
              :cover="require('../../assets/topSongsLogo.png')"
            ></list-table>
          </div>
          <div class="albumItemContainer">
            <div
              class="albumItem"
              v-for="(item, index) in albumdetail"
              :key="index"
            >
              <list-table
                :officialListDetailItem="item.songsObj"
                :cover="item.album.blurPicUrl"
              >
              </list-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="MV" name="second">
          <video-list :videomv="mvlist"></video-list>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="third">
          <div class="singerDesc">
            {{ singerdetail.briefDesc }}
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ListTable from "../../components/listTable/ListTable.vue";
import VideoList from "../../components/video/VideoList.vue";
export default {
  name: "SingerDetail",
  components: {
    ListTable,
    VideoList,
  },
  data() {
    return {
      // 歌手详情
      singerdetail: {},
      activeName: "first",
      // 歌手热门50首
      singerTopSongs: {},
      // 歌手MV
      mvlist: [],
      // 专辑详情
      albumdetail: [],
    };
  },
  created() {
    this.getSingerInfo();
    this.getSingerTopSongs();
    this.getSingerMv();
    this.getSingerAlbum();
  },
  methods: {
    // 获取歌手信息
    async getSingerInfo() {
      // console.log(this.$route.params.id);
      const { data: res } = await this.$http("artist/detail", {
        params: { id: this.$route.params.id },
      });
      // console.log(res);
      this.singerdetail = res.data.artist;
      // console.log(this.singerdetail);
    },
    // 获取歌手热门50首
    async getSingerTopSongs() {
      const { data: res } = await this.$http("artist/top/song", {
        params: { id: this.$route.params.id },
      });
      // console.log(res);
      this.singerTopSongs = res;
      // console.log(this.singerTopSongs);
    },
    // 获取歌手专辑
    async getSingerAlbum() {
      let { data: res } = await this.$http("/artist/album", {
        params: { id: this.$route.params.id },
        limit: 20,
      });
      // console.log(res);
      res = res.hotAlbums;
      await res.forEach((item) => {
        this.getAlbumDetail(item.id);
      });
    },
    // 获取歌手专辑详情
    async getAlbumDetail(id) {
      // console.log(id);
      let { data: res } = await this.$http("album", {
        params: { id: id },
      });
      let songs = res.songs;
      // console.log(res);
      res.songsObj = { songs };
      this.albumdetail.push(res);
      // console.log(this.albumdetail);
    },
    // 获取歌手mv
    async getSingerMv() {
      const { data: res } = await this.$http("artist/mv", {
        params: { id: this.$route.params.id },
      });
      // console.log(res);
      this.mvlist = res.mvs;
      console.log(this.mvlist);
    },
  },
};
</script>

<style lang="less" scoped>
.singerdetail_container {
  width: 90%;
  margin: 0 auto;
}
.listinfo {
  display: flex;
  align-items: center;
  margin: 20px 0;
  width: 100%;
  height: 250px;
  .singer_img {
    width: 270px;
    height: 230px;
    margin-left: 20px;
    margin-right: 40px;
    border-radius: 15px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }
  }
  .singer_content {
    width: 100%;
    height: 230px;
    .singername {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 26px;
      font-weight: 1000;
    }
    .singer_button {
      margin-top: 10px;
      display: flex;
      width: 100%;

      .buttonItem {
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        transform: scale(0.9);
        font-size: 14px;
        color: #666666;
      }
    }
    .tag {
      margin-top: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      .tagItem {
        line-height: 20px;
        padding: 5px 7px;
        margin-left: 10px;
        font-size: 14px;
        color: #666666;
      }
    }
  }
  .singerList {
    margin: 40px;
  }
  .singerDesc {
    font-size: 14px;
    color: #666666;
    line-height: 25px;
    letter-spacing: 0.5px;
    text-indent: 2em;
  }
  .albumItemContainer {
    margin-top: 50px;
  }
}
</style>